<template>
    <div class="tmpl">
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                      <myswipe :imgList="list"></myswipe>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-header">{{goodsList.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                 <p>
                     <span>市场价：<del>&yen;{{goodsList.market_price}}</del></span>&nbsp;&nbsp;&nbsp;
                     <span>销售价：<i>&yen;{{goodsList.sell_price}}</i></span>
                 </p>
                 <p>
                     <span>购买数量：</span>
                     <numberbox :maxcount="goodsList.stock_quantity" @getNum='getNum'></numberbox>
                 </p>
                 <p>
                     <mt-button type="primary" size="small">立即购买</mt-button>
                      <mt-button type="danger" size="small" @click="gocar">加入购物车</mt-button>
                 </p>
                </div>
            </div>
        </div>

         <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  <p>商品货号：{{goodsList.goods_no}}</p>
                  <p>库存情况：{{goodsList.stock_quantity}}件</p>
                  <p>上架时间：{{goodsList.add_time | dataFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>      
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>      
              
            </div>
        </div>
            <transition @before-enter='beforeEnter' @enter='Enter' @after-enter='afterEnter'>
                      <div class="ball" v-show="isshow"></div>
            </transition>

      

       
    </div>
</template>
<script>
import config from "../../js/globalConfig.js"
import myswipe from "../subcomm/myswipe.vue"
import numberbox from "../subcomm/numberbox.vue"
    export default {
        data() {
            return {
                id: this.$route.params.id,
                list:[],
                goodsList:{},
                isshow:false,
                goodscount:1
            }
        },
        created() {
            this.getPhotoInfo()
            this.getgoods()
        },
        methods: {
            getPhotoInfo(){
                this.$http.get('api/getthumimages/'+this.id).then(res=>{
                    if(res.body.status==0){
                        res.body.message.forEach(item=>{
                            item.img=config.imgBaseURL+item.src
                        })
                        this.list=res.body.message;
                    }else{
                        console.log("获取商品图片失败")
                    }
                })
            },
            getgoods(){
                this.$http.get('api/goods/getinfo/'+this.id).then(res=>{
                    if(res.body.status==0){
                        this.goodsList=res.body.message[0];

                    }else{
                        console.log('获取商品信息失败')
                    }
                })
            },
            goDesc(id){
                this.$router.push('/home/goodsdesc/'+id)
            },
            goComment(id){
                this.$router.push('/home/goodscomment/'+id)
            },
            gocar(){
                this.isshow=!this.isshow;
                this.$store.commit('goCarShop',{id:this.id,count:this.goodscount})
            },
            beforeEnter(el){
                el.style.transform='translate(0,0)'
            },
            Enter(el,done){
                el.offsetWidth;
                el.style.transform='translate(86px,'+(310+window.pageXOffset)+'px)';
                done()

            },
            afterEnter(el){
                this.isshow=!this.isshow;
            },
            getNum(num){
                this.goodscount=num;
                console.log(this.goodscount)
            }
        },
        components:{myswipe,numberbox}
    }
</script>
<style lang="scss" scoped>
.tmpl{
    background-color: #eee;
    p{
        font-size:13px;
        margin-bottom:15px;
    }
    i{
        color:red;
        font-style:normal;
        font-size:16px;
    }
    mt-button{
        height:15px;
    }
    .mui-card-footer, .mui-card-header{
        flex-wrap: wrap;
       .mint-button--danger.is-plain{
            margin-top:5px;
        }

    }
    .ball{
        width:15px;
        height: 15px;
        background-color: red;
        border-radius: 15px;
        z-index:99;
        position: absolute;
        left:39%;
        top:56%;
        transition: all 2s cubic-bezier(.31,.71,1,.68)
    }
    }
</style>
